<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-s-promotion"></i>库存管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>查看详情</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider content-position="left"></el-divider>
    <div>
      <el-row :gutter="20">
        <el-col :span="2" style="float: right">
          <el-button type="info" plain @click="goback()">返回</el-button>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" plain class="op_button" @click="dialogVisible=true">修改供应商</el-button>
          <el-dialog title="修改信息" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <el-form :model="updateMessageDetail" :rules="rules1" ref="updateMessageDetail" label-width="120px" @submit.native="updateSupplierSubmit()">

              <el-form-item label="供应商ID" prop="supplierId">
                <el-input  :disabled="true" v-model="supplierId" style="width: 80%"></el-input>
              </el-form-item>
              <el-form-item label="供应商名字" prop="supplierName">
                <el-input v-model="updateMessageDetail.supplierName" style="width: 80%"></el-input>
              </el-form-item>
              <el-form-item label="供应商地址" prop="supplierAddress">
                <el-input v-model="updateMessageDetail.supplierAddress" style="width: 80%"></el-input>
              </el-form-item>
              <el-form-item label="供应商联系方式" prop="supplierContact">
                <el-input v-model="updateMessageDetail.supplierContact" style="width: 80%"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="updateSupplier('updateMessageDetail')">确 定</el-button>
         </span>
          </el-dialog>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" plain class="op_button"  @click="dialogVisible1=true">修改商品信息</el-button>
          <el-dialog title="修改信息" :visible.sync="dialogVisible1" width="30%" :before-close="handleClose">
            <el-form :model="updateCategoryMessage" :rules="rules2" ref="updateCategoryMessage" label-width="120px" @submit.native="updateCategorySubmit()">

              <el-form-item label="商品ID" prop="productId">
                <el-input :disabled="true" v-model="productId" style="width: 80%"></el-input>
              </el-form-item>
              <el-form-item label="商品名字" prop="productName">
                <el-input v-model="updateCategoryMessage.productName" style="width: 80%"></el-input>
              </el-form-item>
              <el-form-item label="商品描述" prop="productDescription">
                <el-input v-model="updateCategoryMessage.productDescription" style="width: 80%"></el-input>
              </el-form-item>
              <el-form-item label="商品单价" prop="productPrice">
                <el-input v-model="updateCategoryMessage.productPrice" style="width: 80%"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible1 = false">取 消</el-button>
    <el-button type="primary" @click="updateCategory('updateCategoryMessage')">确 定</el-button>
         </span>
          </el-dialog>
        </el-col>
      </el-row>
    </div>
    <el-divider content-position="left"></el-divider>
    <div>
      <div>
        <el-descriptions class="margin-top" title="商品信息" :column="4" direction="vertical">
          <el-descriptions-item label="商品ID">{{ productId }}</el-descriptions-item>
          <el-descriptions-item label="商品名称">{{ productName }}</el-descriptions-item>
          <el-descriptions-item label="商品数量">{{ productQuantity }}</el-descriptions-item>
          <el-descriptions-item label="商品单价" :span="2">{{ productPrice }}</el-descriptions-item>
          <el-descriptions-item label="商品描述">{{ productDescription }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <div style="margin-top: 99px;">
        <el-descriptions class="margin-top" title="供应商信息" :column="4" direction="vertical">
          <el-descriptions-item label="供应商ID">{{ supplierId }}</el-descriptions-item>
          <el-descriptions-item label="供应商名字">{{ supplierName }}</el-descriptions-item>
          <el-descriptions-item label="联系电话" :span="2">{{ supplierContact }}</el-descriptions-item>
          <el-descriptions-item label="联系地址">{{ supplierAddress }}</el-descriptions-item>
        </el-descriptions>

      </div>
    </div>
  </div>


</template>

<script>
import axios from "axios";

export default {
  name: "OutBound",
  data(){
    return{
      rules1:{
        supplierId:[
          { required: true, message: '请输入供应商ID', trigger: 'blur' },
        ],
        supplierName:[
          { required: true, message: '请输入供应商名字', trigger: 'blur' },
        ],
        supplierAddress:[
          { required: true, message: '请输入供应商地址', trigger: 'blur' },
        ],
        supplierContact:[
          { required: true, message: '请输入供应商联系方式', trigger: 'blur' },
        ],
      },
      rules2:{
        productId:[
          { required: true, message: '请输入商品ID', trigger: 'blur' },
        ],
        productName:[
          { required: true, message: '请输入商品名字', trigger: 'blur' },
        ],
        productDescription:[
          { required: true, message: '请输入商品描述', trigger: 'blur' },
        ],
        productPrice:[
          { required: true, message: '请输入商品单价', trigger: 'blur' },
        ],
      },

      updateMessageDetail:{
        supplierId:1,
        supplierName:"",
        supplierAddress:"",
        supplierContact:"",
      },
      updateCategoryMessage:{
        productId:1,
        productName:"",
        productDescription:"",
        productPrice:0.0,
      },
      dialogVisible:false,
      dialogVisible1:false,
      productId: 1,
      productName: "",
      productQuantity: 11,
      productPrice: 22,
      productDescription: "",
      supplierId: 1,
      supplierName: "",
      supplierContact: "",
      supplierAddress: "",

    }
  },
  methods:{
    updateSupplierSubmit(){
    },
    updateSupplier(formName){
      this.updateSupplierSubmit();
      this.$refs[formName].validate((valid) => {
            if (valid){
      axios.post('http://localhost:9902/category/update/supplier', this.updateMessageDetail)
          .then(response => {
            if (response.data.state == 20000){
              this.dialogVisible = false; // 隐藏对话框
              confirm("修改成功!")
              let productId = JSON.parse(this.$route.query.category);
              console.log(productId);
              this.listCategoryMessage(productId);
            }else {
              confirm(response.data.message);
              let productId = JSON.parse(this.$route.query.category);
              console.log(productId);
              this.listCategoryMessage(productId);
            }
            // 处理你的响应数据
          })
          .catch(error => {
            // 处理错误
          });
            }
      });
    },
    goback(){
      this.$router.push({path: '/view/inventory/categoryManagement'})
    },
    updateCategorySubmit(){
    },
    updateCategory(formName){
      this.updateCategorySubmit();
      this.$refs[formName].validate((valid) => {
        if (valid){
      axios.post('http://localhost:9902/category/update/category', this.updateCategoryMessage)
          .then(response => {
            if (response.data.state == 20000){
              this.dialogVisible1 = false; // 隐藏对话框
              confirm("修改成功!")
              let productId = JSON.parse(this.$route.query.category);
              console.log(productId);
              this.listCategoryMessage(productId);
            }else {
              confirm(response.data.message);
            }
            // 处理你的响应数据
          })
          .catch(error => {
            // 处理错误
          });
            }
      });
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
      listCategoryMessage(productId){
        this.axios.get('http://localhost:9902/category/selectCategoryById',{params:{productId:productId}})
            .then(response => {
              this.productId = response.data.data.productId
              this.productName= response.data.data.productName
              this.productQuantity = response.data.data.productQuantity
              this.productPrice = response.data.data.productPrice
              this.productDescription = response.data.data.productDescription
              this.supplierId = response.data.data.supplierId
              this.supplierName = response.data.data.supplierName
              this.supplierContact = response.data.data.supplierContact
              this.supplierAddress = response.data.data.supplierAddress
            })
            .catch(error => {
              console.error(error)
            })
      }
  },
  created() {

  },
  mounted() {
    let productId = JSON.parse(this.$route.query.category);
    console.log(productId);
    this.listCategoryMessage(productId);
  },

}

</script>

<style scoped>

</style>